<template>
  <div class="add-address">
    <nav-bar :title="title"></nav-bar>
    <div class="input-holder">
      <van-field v-model="addressData.userName" placeholder="姓名" />
      <van-field v-model="addressData.telNumber" placeholder="手机号" />
      <van-field
        v-model="addressData.address"
        @click="showPopup"
        placeholder="省份、城市、区县"
      />
      <van-field
        v-model="addressData.detailadress"
        rows="1"
        autosize
        type="textarea"
        placeholder="详细地址，如楼盘，楼盘号等"
      />
      <van-checkbox
        v-model="addressData.checked"
        checked-color="rgb(180, 40, 45)"
        shape="square"
        >设置为默认地址</van-checkbox
      >
    </div>

    <van-popup v-model="popShow" position="bottom" :style="{ height: '35%' }">
      <van-area
        title="省市区选择"
        :columns-placeholder="['请选择', '请选择', '请选择']"
        @confirm="getAreaSelect"
        @cancel="cancelAreaSelect"
        :area-list="province_list"
      />
    </van-popup>

    <div class="save-btn" @click="save">保存</div>
  </div>
</template>

<script>
import { getAddressDetail, saveAddress } from "@/api/pages/address";
import province_list from "@/assets/area/area";
import NavBar from "@/components/common/nav-bar";
export default {
  data() {
    return {
      title: "",
      // 城市列表
      province_list,
      // 城市弹窗
      popShow: false,
      addressData: {
        addressId: "",
        address: "",
        checked: false,
        detailadress: "",
        openId: "",
        telNumber: "",
        userName: "",
      },
    };
  },
  methods: {
    // 获取详细地址信息
    getAddress(id) {
      getAddressDetail({ id }).then((res) => {
        console.log(res);
        let ads = this.addressData;
        let red = res.data;
        ads.userName = red.name;
        ads.address = red.address;
        ads.checked = red.is_default ? true : false;
        ads.telNumber = red.mobile;
        ads.detailadress = red.address_detail;
        ads.addressId = red.id;
      });
    },
    // 保存地址信息
    save() {
      this.addressData.checked = this.addressData.checked.toString();
      console.log(this.addressData);
      saveAddress(this.addressData).then((res) => {
        if (res.data) {
          this.$toast.success("保存成功");
          this.$router.go(-1);
        } else {
          console.log(res);
        }
      });
    },
    // 点击弹出地址选择器
    showPopup() {
      this.popShow = true;
    },
    // 确认城市选择
    getAreaSelect(data) {
      this.addressData.address = "";
      data.forEach((value) => {
        this.addressData.address = this.addressData.address + value.name + " ";
      });
      this.popShow = false;
    },
    // 取消城市选择
    cancelAreaSelect() {
      this.popShow = false;
    },
  },
  created() {
    let addressId = this.$route.query.id;
    this.addressData.openId = localStorage.getItem("openId");
    if (addressId) {
      this.title = "修改地址";
      this.addressData.addressId = addressId;
      this.getAddress(addressId);
    } else {
      this.title = "新建地址";
    }
  },
  components: {
    "nav-bar": NavBar,
  },
};
</script>

<style lang="scss">
.add-address {
  .input-holder {
    box-sizing: border-box;
    margin-top: 2px;
    padding: 15px;

    min-height: 600px;
    background-color: #fff;
    .van-field {
      border-bottom: 1px solid #f4f4f4;
      height: 54px;
    }
    .van-checkbox {
      margin-top: 20px;
    }
  }

  .save-btn {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    background: #b4282d;
  }
}
</style>